@charset "utf-8";
@function r($px){
    @return($px/40) * 1rem
}
@keyframes  mmb {
    0%{
        transform:translateX(-200px) ;opacity: 0;
    }
    20%{
        transform: translateX(400px);   opacity: 0;
    }
    40%{
        transform: translateX(400px) translateY(150px);
    }
    60%{
        transform: translateX(-200px) translateY(150px);
    }
    80%{
         transform: translateX(-200px) translateY(77vh);
    }
    100%{
        transform: translateX(58vw) translateY(77vh);opacity: 1;
    }
}
@keyframes  two {
    0%{
        transform:translateX(400px) ;
    }
    20%{
        transform: translateX(-200px);   
    }
    40%{
        transform: translateX(-200px) translateY(150px);
    }
    60%{
        transform: translateX(400px) translateY(150px);
    }
    80%{
         transform: translateX(400px) translateY(77vh);
    }
    100%{
        transform: translateX(-5vw) translateY(77vh);
    }
}
@keyframes three{
    0%{
        transform: translateX(-200px) translateY(77vh);
    }
    20%{
        transform: translateX(400px) translateY(77vh);
    }
    40%{
        transform: translateX(400px) translateY(450px);
    }
    60%{
        transform: translateX(-200px) translateY(450px);
    }
    80%{
        transform: translateX(-200px);
    }
    100%{
        transform: translateX(64vw) translateY(0vh);
    }
}
@keyframes four{
    0%{
        transform: translateX(400px) translateY(77vh);
    }
    20%{
        transform: translateX(-200px) translateY(77vh);
    }
    40%{
        transform: translateX(-200px) translateY(450px);
    }
    60%{
        transform: translateX(400px) translateY(450px);
    }
    80%{
        transform: translateX(400px);
    }
    100%{
       transform: translateX(-6vw) translateY(-4vh);
    }
}
@keyframes five{
    0%{
        transform:  translateX(44vw) translateY(-10vh);
    }
    60%{
         transform: translateX(44vw) translateY(-20vh) rotateX(180deg);
    }
    100%{
        transform: rotateX(0deg) translateX(44vw) translateY(20vh);
    }
}
@keyframes six {
    0%{
        transform: translateX(44vw) translateY(-10vh);
    }
    60%{
        transform:  translateX(44vw) translateY(-20vh) rotateZ(0deg);
    }
    100%{
        transform: translateX(44vw) translateY(30vh) rotateZ(360deg);
    }
}
@keyframes seven {
    0%{
        transform: translateX(44vw)  translateY(-10vh);
    }
    60%{
        transform:  translateX(44vw) translateY(-20vh) rotateZ(0deg);
    }
    100%{
        transform: translateX(44vw) translateY(45vh) rotateZ(360deg);
    }
}
@keyframes eight {
    0%{
        transform:translateX(44vw)  translateY(-10vh);
    }
    60%{
        transform:translateX(44vw)  translateY(-20vh) rotateZ(0deg);
    }
    100%{
        transform: translateX(44vw) translateY(60vh) rotateZ(360deg);
    }
}
@keyframes bag {
    0%{
        transform: translateX(-50vw) translateY(-50vh);
    }
    33%{
        transform: translateX(150vw) translateY(150vh);
    }
    66%{
         transform: translateX(-50vw) translateY(-50vh);
    }
    100%{
      transform: translateX(64vw) translateY(20vh);
    }
}
@keyframes bbg {
    0%{
        transform: translateX(-50vw) translateY(-50vh);
    }
    33%{
        transform: translateX(150vw) translateY(150vh);
    }
    66%{
         transform: translateX(-50vw) translateY(-50vh);
    }
    100%{
      transform: translateX(77vw) translateY(46vh);
    }
}
@keyframes bcg {
    0%{
        transform: translateX(-50vw) translateY(-50vh);
    }
    33%{
        transform: translateX(150vw) translateY(150vh);
    }
    66%{
         transform: translateX(-50vw) translateY(-50vh);
    }
    100%{
     transform: translateX(80vw) translateY(55vh);
    }
}
@keyframes bdg {
    0%{
        transform: translateX(150vw) translateY(-50vh);
    }
    33%{
        transform: translateX(-50vw) translateY(150vh);
    }
    66%{
         transform: translateX(150vw) translateY(-50vh);
    }
    100%{
       transform: translateX(-10vw) translateY(30vh);
    }
}
@keyframes beg {
    0%{
        transform: translateX(150vw) translateY(-50vh);
    }
    33%{
        transform: translateX(-50vw) translateY(150vh);
    }
    66%{
         transform: translateX(150vw) translateY(-50vh);
    }
    100%{
       transform: translateX(-10vw) translateY(50vh);
    }
}
@keyframes ones {
    0%{
        transform:translateX(-200px) ;
    }
    20%{
        transform: translateX(400px);   
    }
    40%{
        transform: translateX(400px) translateY(150px);
    }
    60%{
        transform: translateX(-200px) translateY(150px);
    }
    80%{
         transform: translateX(-200px) translateY(77vh);
    }
    100%{
        transform: translateX(60vw) translateY(87vh) rotateZ(-90deg);
    }
}
@keyframes twos {
     0%{
        transform: translateX(400px) translateY(77vh);
    }
    20%{
        transform: translateX(-200px) translateY(77vh);
    }
    40%{
        transform: translateX(-200px) translateY(450px);
    }
    60%{
        transform: translateX(400px) translateY(450px);
    }
    80%{
        transform: translateX(400px);
    }
    100%{
       transform: translateY(-13vh);
    }
}
@keyframes threes {
    0%{
        transform: translateX(44vw) translateY(-10vh);
    }
    60%{
        transform:  translateX(44vw) translateY(-50vh) rotateZ(0deg);
    }
    100%{
         transform: translateX(60vw) translateY(-8vh);
    }
}
@keyframes fours {
    0%{
        transform: translateX(-150vw);
    }
    75%{
        transform: translateX(-130vw);
    }
    100%{
        transform: translateX(0vw);
    }
}
@keyframes onet{
     0%{
        transform:translateX(-200px) ;opacity: 0;
    }
    20%{
        transform: translateX(400px);   
    }
    40%{
        transform: translateX(400px) translateY(150px);
    }
    60%{
        transform: translateX(-200px) translateY(150px);
    }
    80%{
         transform: translateX(-200px) translateY(77vh);
    }
    100%{
       transform: translateX(70vw) translateY(85vh) rotateZ(90deg);opacity: 1;
    }
}
@keyframes twot {
    0%{
        transform:translateX(-200px) ;
    }
    20%{
        transform: translateX(400px);   
    }
    40%{
        transform: translateX(400px) translateY(150px);
    }
    60%{
        transform: translateX(-200px) translateY(150px);
    }
    80%{
         transform: translateX(-200px) translateY(77vh);
    }
    100%{
        transform:translateX(65vw) translateY(63vh) rotateZ(141deg);
    }
}
@keyframes threet{
    0%{
        transform:translateX(-200px) ;
    }
    20%{
        transform: translateX(400px);   
    }
    40%{
        transform: translateX(400px) translateY(150px);
    }
    60%{
        transform: translateX(-200px) translateY(150px);
    }
    80%{
         transform: translateX(-200px) translateY(77vh);
    }
    100%{
       transform: translateX(70vw) translateY(50vh) rotateZ(-85deg);
    }
}
@keyframes fourt{
    0%{
        transform: translateX(250vw);
    }
    75%{
        transform: translateX(100vw);
    }
    100%{
        transform: translateX(0vw);
    }
}
@keyframes fivet {
    0%{
        transform: translateX(-200vw) translateY(-200vh);
    }
    100%{
        transform: translateX(-190vw)translateY(-200vh);
    }
}
@keyframes onex{
     0%{
        transform:translateX(400px) ;
    }
    20%{
        transform: translateX(-200px);   
    }
    40%{
        transform: translateX(-200px) translateY(150px);
    }
    60%{
        transform: translateX(400px) translateY(150px);
    }
    80%{
         transform: translateX(400px) translateY(77vh);
    }
    100%{
        transform: translateX(4vw) translateY(80vh) rotateZ(-25deg);
    }
}
@keyframes twox{
    0%{
        transform:translateX(400px) ;
    }
    20%{
        transform: translateX(-200px);   
    }
    40%{
        transform: translateX(-200px) translateY(150px);
    }
    60%{
        transform: translateX(400px) translateY(150px);
    }
    80%{
         transform: translateX(400px) translateY(77vh);
    }
    100%{
        transform: translateX(72vw) translateY(87vh) rotateZ(-90deg);
    }
}
@keyframes radius {
    0%{
         transform:translateX(15vw) translateY(65vh);opacity:0;
    }
    60%{
        transform: translateX(15vw) translateY(65vh);opacity:0;
    }
    100%{
        transform:translateX(15vw) translateY(65vh) scale(1.3) ;opacity:1;
    }
}

#web{
   .page1.active{
       .dian{
           animation: radius 10s infinite;
       }
       .dian1{
           animation: radius 1s infinite;
       }
       .dian2{
           animation: radius 1s infinite;
       }
       .dian3{
           animation: radius 1s infinite;
       }
       .dian4{
           animation: radius 1s infinite;
       }
           .one{
                animation: mmb 2s ;
            }
            .two{
                animation: two 2s ;
            }
            .six{
                animation: three 2s;
            }
            .five{
                animation: four 2s;
            }
            .three{
                animation: beg 2s;
            }
            .four{
                animation: bdg 2s;
            }
            .seven{
                animation: bag 2s;
            }
            .eight{
                animation: bbg 2s;
            }
            .nine{
                animation: bcg 2s;
            }
            .yao{
                animation: six 3s;
            }
            .qing{
                animation: seven 3.2s ;
            }
            .han{
                animation: eight 3.4s;
            }
            .logo{
                animation: five 3.6s;
            }
   }
   .page2.active{
       .ones{
           animation:  twos 2s;
       }
       .twos{
           animation: threes 2s;
       }
       .threes{
           animation: ones 2s;
       }
       .twowz{
           animation: fours 2.2s;
       }
   }
   .page3.active{
       .onet{
           animation: twos 2s;
       }
       .twot{
           animation: threet 2s;
       }
       .threet{
           animation: twot 2s;
       }
       .fourt{
           animation: onet 2s ;
       }
       .jmd{
           animation: fourt 2.5s;
       }
       .hjm{
           animation: fivet 2.5s;
       }
       .ljm{
           animation: fivet 2.6s;
       }
       .hjm1{
           animation: fivet 2.7s;
       }
       .ljm1{
           animation: fivet 2.8s;
       }.hjm2{
           animation: fivet 2.9s;
       }
       .ljm2{
           animation: fivet 3s;
       }
       .pink{
           animation: fivet 3.1s;
       }
   }
   .page4.active{
       .onet{
           animation: twos 2s;
       }
       .twof{
           animation:onex 2s;
       }
       .threef{
           animation:twox 2s;
       }
       .red{
           animation: fourt 2.3s;
       }
       .reds{
           animation: fourt 2.6s;
       }
       .pink{
           animation: fivet 2.8s;
       }
   }
   .page5.active{
       .onet{
           animation: twos 2s;
       }
       .threef{
           animation:twox 2s;
       }
       .wqhg{
           animation: fourt 2.5s;
       }
       .hgk{
           animation: fivet 2.7s;
       }
       .hgxk{
           animation: fivet 2.9s;
       }
       .hgks{
           animation: fivet 3.1s;
       }
   }
   .page6.active{
       .one{
                animation: mmb 2s ;
            }
        .onet{
           animation: twos 2s;
       }
        .six{
                animation: three 2s;
            }
        .seven{
                animation: bag 2s;
            }
        .eight{
                animation: bbg 2s;
            }
        .nine{
                animation: bcg 2s;
            }
        .jmds{
            animation: fivet 2.4s;
        }
        .hjms{
            animation: fivet 2.5s;
        }
        .ljms{
            animation: fivet 2.6s;
        }
        .hjmt{
            animation: fivet 2.7s;
        }
        .ljmt{
            animation: fivet 2.8s;
        }
        .hjmf{
            animation: fivet 2.9s;
        }
        .pink{
           animation: fivet 3s;
       }
   }
    .section{
        overflow: hidden;
         text-align: center;
        background: url(../img/page1_bg.jpg) no-repeat;
        background-size: 100% 100%;
        .kuang{
             position: absolute;
            width: r(750);
            height: 100%;
            transform-origin: left top;
            left: 0;
            top: 0;
            .dian{
                width: 25px;
                height: 25px;
                display: inline-block;
                position: absolute;
                border-radius: 50%;
                background: yellow;
                left: 10vh;
                 top: 10vw;
            }
            .dian1{
                width: 25px;
                height: 25px;
                display: inline-block;
                position: absolute;
                border-radius: 50%;
                background: yellow;
                left: 20vh;
                top: 20vw;
            }
            .dian2{
                width: 25px;
                height: 25px;
                display: inline-block;
                position: absolute;
                border-radius: 50%;
                background: yellow;
                left: 30vh;
                top: 30vw;
            }
            .dian3{
                width: 25px;
                height: 25px;
                display: inline-block;
                position: absolute;
                border-radius: 50%;
                background: yellow;
                left: 35vh;
                top: 3vw;
            }
            .dian4{
                width: 25px;
                height: 25px;
                display: inline-block;
                position: absolute;
                border-radius: 50%;
                background: yellow;
                transform: translateX(-15vw) translateY(40vh);
            }
            .one{
                top: 0;
                left: 0;
                position: absolute;
                display: inline-block;
                 transform: translateX(58vw) translateY(77vh);
                 z-index: 1;
            }
             
           .two{
                top: 0;
                left: 0;
                position: absolute;
                display: inline-block;
                 transform: translateX(-5vw) translateY(77vh);
           }
           .three{
               top: 0;
               left: 0;
               position: absolute;
               display: inline-block;
               transform: translateX(-10vw) translateY(50vh);
           }
           .four{
                top: 0;
               left: 0;
               position: absolute;
               display: inline-block;
                 transform: translateX(-10vw) translateY(30vh);
           }
           .five{
               top: 0;
               left: 0;
               position: absolute;
               display: inline-block;
               transform: translateX(-6vw) translateY(-4vh);
           }
           .six{
               top: 0;
               left: 0;
               position: absolute;
               display: inline-block;
               transform: translateX(64vw) translateY(0vh);
               z-index: 1;
           }
           .seven{
               top: 0;
               left: 0;
               position: absolute;
               display: inline-block;
               transform: translateX(64vw) translateY(20vh);
               z-index: 1;
           }
           .eight{
               top: 0;
               left: 0;
               position: absolute;
               display: inline-block;
               transform: translateX(77vw) translateY(46vh);
               z-index: 1;
           }
           .nine{
               top: 0;
               left: 0;
               position: absolute;
               display: inline-block;
               transform: translateX(80vw) translateY(55vh);
               z-index: 1;
           }
           .logo{
               top: 0;
               left: 0;
               position: absolute;
               display: inline-block;
               transform: translateX(44vw) translateY(20vh);
           }
           .yao{
               top: 0;
               left: 0;
               position: absolute;
               display: inline-block;
               transform: translateX(44vw) translateY(30vh);
           }
           .qing{
               top: 0;
               left: 0;
               position: absolute;
               display: inline-block;
               transform: translateX(44vw) translateY(45vh);
           }
           .han{
               top: 0;
               left: 0;
               position: absolute;
               display: inline-block;
               transform: translateX(44vw) translateY(60vh);
           }

            .twowz{ 
//              position: absolute;
                display: inline-block;
                padding: r(150) r(72);
                
                h3{
                    color: #F5793A;
                }
                p{
                    line-height: r(65);
                    text-align: left;
                }
            }
            .ones{
                top: 0;
                left: 0;
                position: absolute;
                display: inline-block;
                transform:translateY(-13vh);
            }
           
            .twos{
                top: 0;
                left: 0;
                position: absolute;
                display: inline-block;
                transform: translateX(60vw) translateY(-8vh);
            }
            .threes{
                top: 0;
                left: 0;
                position: absolute;
                display: inline-block;
                transform: translateX(60vw) translateY(87vh) rotateZ(-90deg);
            }
            .onet{
                top: 0;
                left: 0;
                position: absolute;
                display: inline-block;
                transform: translateY(-13vh);
            }
            .twot{
                 top: 0;
                left: 0;
                position: absolute;
                display: inline-block;
                transform: translateX(70vw) translateY(50vh) rotateZ(-85deg);
                z-index: 1;
            }
            .threet{
                 top: 0;
                left: 0;
                position: absolute;
                display: inline-block;
                transform: translateX(65vw) translateY(63vh) rotateZ(141deg);
                z-index: 1;
            }
            .fourt{
                 top: 0;
                left: 0;
                position: absolute;
                display: inline-block;
                transform: translateX(70vw) translateY(85vh) rotateZ(90deg);
                z-index: 1;
            }
            .pink{
                border: 1px solid black;
                border-radius: r(40);
                background: #FDEFD9;
                display: inline-block;
                text-align: left;
                margin: 5%;
                width: 80%;
                height: 75%;
                padding-top: r(250);
                p{
                    line-height: r(85);
                }
                h3{
                margin-top: r(540);  
                }
                 .left{
                     
                     .tu{
                         display: inline-block;
                         float: left;
                     }
                     .zi{
                         float: right;
                         display: inline-block;
                     }
                 }
                  }
                .jmd{
                    border: 1px solid black;
                    background: #FFD529;
                    width: 40%;
                    display: inline-block;
                    position: absolute;
                    transform: translateX(-43vw) translateY(4vh);
                    h3{
                        line-height: r(5);
                    }
                }
                    .hjm{
                        border: 1px solid black;
                        background: #FFD529;
                        width: 80%;
                        display: inline-block;
                        position: absolute;
                        transform: translateX(-88vw) translateY(14vh);
//                      margin-top: r(20);
                        p{
                            margin: r(12) r(40);
                            text-align: left;
                        }
                    }
                .ljm{
                     border: 1px solid black;
                    background: #41CC8E;
                    width: 80%;
                     display: inline-block;
                     position: absolute;
                     transform: translateX(-88vw) translateY(27vh);
//                  margin-top: r(20);
                    p{
                         margin: r(12) r(40);
                         text-align: left;
                      }
                }
                .hjm1{
                        border: 1px solid black;
                        background: #FFD529;
                        width: 80%;
                        display: inline-block;
                        position: absolute;
                        transform: translateX(-88vw) translateY(40vh);
//                      margin-top: r(20);
                        p{
                            margin: r(12) r(40);
                            text-align: left;
                        }
                    }
                .ljm1{
                     border: 1px solid black;
                    background: #41CC8E;
                    width: 80%;
                     display: inline-block;
                     position: absolute;
                     transform: translateX(-88vw) translateY(53vh);
//                  margin-top: r(20);
                    p{
                         margin: r(12) r(40);
                         text-align: left;
                      }
                }
                .hjm2{
                        border: 1px solid black;
                        background: #FFD529;
                        width: 80%;
                        display: inline-block;
                        position: absolute;
                        transform: translateX(-88vw) translateY(66vh);
                        p{
                            margin: r(12) r(40);
                            text-align: left;
                        }
                    }
                .ljm2{
                     border: 1px solid black;
                    background: #41CC8E;
                    width: 80%;
                     display: inline-block;
                     position: absolute;
                     transform: translateX(-88vw) translateY(79vh);
                    p{
                         margin: r(12) r(40);
                         text-align: left;
                      }
                }
                .twof{
                    top: 0;
                    left: 0;
                    position: absolute;
                    display: inline-block;
                    transform: translateX(4vw) translateY(80vh) rotateZ(-25deg);
                }
                .threef{
                    top: 0;
                    left: 0;
                    position: absolute;
                    display: inline-block;
                    transform: translateX(72vw) translateY(87vh) rotateZ(-90deg);
                }
                .red{
                    border: 1px solid black;
                    background: #F5793A;
                    width: 45%;
                    margin-top: r(50);
                    display: inline-block;
                    position: absolute;
                    transform: translateX(-47vw) translateY(4vh);
                    h3{
                        line-height: r(40);
                    }
                }
                .reds{
                    border: 1px solid black;
                    background: #F5793A;
                    width: 45%;
                    margin-top: r(50);
                    display: inline-block;
                    position: absolute;
                    transform: translateX(-47vw) translateY(18vh);
                    p{
                        line-height: r(85);
                    }
                }
                .wqhg{
                    border: 1px solid black;
                    background: #FFD529;
                    width: 40%;
                    display: inline-block;
                    position: absolute;
                    transform:translateY(4vh);
                    h3{
                        line-height: r(5);
                    }
                }
                .hgk{
                    margin-left: 7%;
                    width: 86%;
                    height: 35%;
                    margin-top: r(120);
                    border: 1px solid black;
                    border-radius: r(40);
                    background: #FDEFD9;
                    img{
                        width: 95%;
                        height: 97%;
                    }
                }
                .hgxk{
                    margin-left: 7%;
                    width: 86%;
                    border: 1px solid black;
                    border-radius: r(40);
                    background: #FDEFD9;
                    img{
                        width: 48%;
                    }
                }
                .hgks{
                    margin-left: 7%;
                    width: 86%;
                    border-radius: r(40);
                    border: 1px solid black;
                    background: #FDEFD9;
                    img{
                        width: 95%;
                    }
                }
                 .jmds{
                    border: 1px solid black;
                    background: #FFD529;
                    width: 40%;
                    display: inline-block;
                    position: absolute;
                    transform: translateX(-80vw) translateY(4vh);
                    h3{
                        line-height: r(5);
                    }
                }
                    .hjms{
                        border: 1px solid black;
                        background: #FFD529;
                        width: 65%;
                        display: inline-block;
                        position: absolute;
                        transform: translateX(-88vw) translateY(14vh);
                        p{
                            margin: r(12) r(40);
                            text-align: left;
                        }
                    }
                .ljms{
                     border: 1px solid black;
                    background: #41CC8E;
                    width: 65%;
                     display: inline-block;
                     position: absolute;
                     transform: translateX(-88vw) translateY(24vh);
                    p{
                         margin: r(12) r(40);
                         text-align: left;
                      }
                }
                .hjmt{
                        border: 1px solid black;
                        background: #FFD529;
                        width: 65%;
                        display: inline-block;
                        position: absolute;
                        transform: translateX(-88vw) translateY(34vh);
                        p{
                            margin: r(12) r(40);
                            text-align: left;
                        }
                    }
                .ljmt{
                     border: 1px solid black;
                    background: #41CC8E;
                    width: 65%;
                     display: inline-block;
                     position: absolute;
                     transform: translateX(-88vw) translateY(44vh);
//                  margin-top: r(20);
                    p{
                         margin: r(12) r(40);
                         text-align: left;
                      }
                }
                .hjmf{
                        border: 1px solid black;
                        background: #FFD529;
                        width: 65%;
                        display: inline-block;
                        position: absolute;
                        transform: translateX(-88vw) translateY(54vh);
                        p{
                            margin: r(12) r(40);
                            text-align: left;
                        }
                    }
        }
      
        .yuan{
            width: r(200);
            display: inline-block;
            height: r(200);
            position: relative;
            background: #FFD529;
            border-radius: 50%;
            box-shadow: 0 0 0px r(30) #3BB87F;
            transition: all 2s 200ms; 
            z-index: 100;
          .zhong{
                width: r(50);
                height: r(50);
                position: absolute;
                top: 40%;
                left: 37.5%;
                display: inline-block;
                background: #3BB87F;
                box-shadow: 0 0 0 r(30) #FFFFFF;
                border-radius: 50%;
                transition: all 1s 1s;
                z-index: 100;
                .xiao{
                width: r(50);
                height: r(50);
                top: 40%;
                left: 37.5%;
                display: inline-block;
                background: #3BB87F;
                box-shadow: 0 0 0 r(35) #FFFFFF;
                border-radius: 50%;
                transition: all 1s 500ms;
                z-index: 100;
                }
            }
        }
          
    }
    
    .section.active .yuan{
        transform: scale(7) ;
        opacity: 0;
        .zhong{
            transform: scale(2);
//          opacity: 0.5;
                .xiao{
                    transform: scale(0.2);
//                  opacity: 0.5;
                }
        }
    }
    
}

